import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from './router'
import store from './utils/store'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import { VueMasonryPlugin } from 'vue-masonry'
import VueLuckyCanvas from '@lucky-canvas/vue'
import SlideVerify from 'vue-monoplasty-slide-verify'

import 'swiper/swiper.min.css'
import 'element-plus/dist/index.css'
import 'animate.css'

const app = createApp(App)
app.config.globalProperties.$baseURL = '/api'
// 引入图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 千分号
app.config.globalProperties.$thousands = function (value) {
  if (!value && value !== 0) {
    return 0
  }
  return Number(value).toLocaleString('en-US', { maximumFractionDigits: 10 })
}
// 千分号保留两位小数点
app.config.globalProperties.$thousands2 = function (value) {
  if (!value || isNaN(value)) return '0.00'
  return parseFloat(value)
    .toFixed(2)
    .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
}

app.config.globalProperties.$store = store

app
  .use(router)
  .use(ElementPlus)
  .use(VueAwesomeSwiper)
  .use(VueMasonryPlugin, {
    transitionDuration: '0.4s'
  })
  .use(VueLuckyCanvas)
  .use(SlideVerify)
  .mount('#app')

export { app }
